<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="分享潮客"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 商户信息卡片 -->
      <view class="merchant-card">
        <view class="merchant-header">
          <image
            :src="merchantInfo.avatar"
            class="merchant-avatar"
            mode="aspectFill"
          />
          <view class="merchant-info">
            <text class="merchant-name">{{ merchantInfo.name }}</text>
            <text class="merchant-phone">{{ merchantInfo.phone }}</text>
          </view>
        </view>

        <!-- 统计数据 -->
        <view class="stats-row">
          <view class="stat-item">
            <text class="stat-value">{{ stats.totalPoints }}</text>
            <text class="stat-label">累计积分用券</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ stats.totalOrders }}</text>
            <text class="stat-label">累计订单数</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ stats.totalFans }}</text>
            <text class="stat-label">累计粉丝</text>
          </view>
        </view>
      </view>

      <!-- 可激活抵用券 -->
      <view class="coupon-card" @click="goToActivateCoupon">
        <view class="coupon-info">
          <text class="coupon-label">可激活抵用券</text>
          <text class="coupon-value">{{ activatableCoupon }}</text>
        </view>
        <uni-icons type="right" size="18" color="#999"></uni-icons>
      </view>

      <!-- 今日数据 -->
      <view class="today-card">
        <view class="today-row">
          <view class="today-item">
            <text class="today-value">{{ todayData.orders }}</text>
            <text class="today-label">今日订单</text>
          </view>
          <view class="divider"></view>
          <view class="today-item">
            <text class="today-value">{{ todayData.fans }}</text>
            <text class="today-label">今日粉丝</text>
          </view>
        </view>
      </view>

      <!-- 推广海报按钮 -->
      <view class="poster-btn" @click="goToPoster">
        <view class="btn-content">
          <uni-icons type="image" size="24" color="#ff9500"></uni-icons>
          <text>推广海报</text>
        </view>
        <uni-icons type="arrowright" size="20" color="#ff9500"></uni-icons>
      </view>

      <!-- 功能入口 -->
      <view class="function-list">
        <view class="function-item" @click="goToMyFans">
          <view class="function-left">
            <uni-icons
              type="person-filled"
              size="24"
              color="#ff9500"
            ></uni-icons>
            <text class="function-text">我的粉丝</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
        <view class="function-item" @click="goToFansOrders">
          <view class="function-left">
            <uni-icons type="list" size="24" color="#ff9500"></uni-icons>
            <text class="function-text">粉丝订单</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
        <view class="function-item" @click="goToInviteCode">
          <view class="function-left">
            <uni-icons type="contact" size="24" color="#ff9500"></uni-icons>
            <text class="function-text">我的邀请码</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 商户信息
const merchantInfo = ref({
  avatar: "/static/logo.png",
  name: "临安嘉智行缘",
  phone: "188****6377",
});

// 统计数据
const stats = ref({
  totalPoints: "767.69",
  totalOrders: "937",
  totalFans: "51",
});

// 可激活抵用券
const activatableCoupon = ref("4.78");

// 今日数据
const todayData = ref({
  orders: "0",
  fans: "0",
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 跳转到激活抵用券
const goToActivateCoupon = () => {
  uni.navigateTo({
    url: "/pages/index/couponDetails/activateCoupon",
  });
};

// 跳转到推广海报
const goToPoster = () => {
  uni.showToast({
    title: "推广海报",
    icon: "none",
  });
  // TODO: 跳转到推广海报页面
};

// 跳转到我的粉丝
const goToMyFans = () => {
  uni.navigateTo({
    url: "/pages/mine/shareTrendy/myFans",
  });
};

// 跳转到粉丝订单
const goToFansOrders = () => {
  uni.navigateTo({
    url: "/pages/mine/shareTrendy/fansOrders",
  });
};

// 跳转到我的邀请码
const goToInviteCode = () => {
  uni.navigateTo({
    url: "/pages/mine/shareTrendy/myInviteCode",
  });
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 16rpx;
  padding-top: 20rpx;
}

// 商户信息卡片
.merchant-card {
  background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%);
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.merchant-header {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 32rpx;
}

.merchant-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
}

.merchant-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.merchant-name {
  font-size: 32rpx;
  color: #fff;
  font-weight: 600;
}

.merchant-phone {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.stats-row {
  display: flex;
  justify-content: space-around;
  padding-top: 24rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.3);
}

.stat-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.stat-value {
  font-size: 36rpx;
  color: #fff;
  font-weight: 700;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

// 可激活抵用券卡片
.coupon-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:active {
    opacity: 0.8;
  }
}

.coupon-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.coupon-label {
  font-size: 28rpx;
  color: #333;
}

.coupon-value {
  font-size: 40rpx;
  color: #ff9500;
  font-weight: 700;
}

// 今日数据卡片
.today-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.today-row {
  display: flex;
  align-items: center;
}

.today-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.today-value {
  font-size: 40rpx;
  color: #333;
  font-weight: 700;
}

.today-label {
  font-size: 24rpx;
  color: #999;
}

.divider {
  width: 1rpx;
  height: 80rpx;
  background-color: #f5f5f5;
}

// 推广海报按钮
.poster-btn {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx 32rpx;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:active {
    opacity: 0.8;
  }
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 16rpx;

  text {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
}

// 功能列表
.function-list {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.function-item {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f9f9f9;
  }
}

.function-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.function-text {
  font-size: 28rpx;
  color: #333;
}
</style>
